<template>
    <div>
        <p>学生的名字：</p>
        <ul>
            <!--哪个标签需要循环就在哪个标签上加上循环指令-->
            <li v-for="(item,index) in arr">{{ item }}--{{ index }}</li>
        </ul>
        <p>个人详细信息：</p>
        <ul>
            <li v-for="obj in stuarr" :key="obj">
                <span>{{ obj.name }}</span> ==
                <span>{{ obj.age }}</span>==
                <span>{{ obj.sex }}</span>==
                <span>{{ obj.hobby }}</span>
            </li>
        </ul>
        <p>对象信息：</p>
        <div v-for="(value,key) in objs">
            {{ key }} -- {{ value }}
        </div>
    </div>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
const arr = ref(['小明', '小红', '小刚'])
const stuarr = ref([
    {
        name: '萧炎',
        age: 18,
        sex: '男',
        hobby:'修炼'
    },
    {
        name: '美杜莎',
        age: 18,
        sex: '女',
        hobby: '萧炎'
},
    {
        name: '小医仙',
        age: 18,
        sex: '女',
        hobby: '萧炎'
}
])
const objs = reactive({
    name: '药老',
    class: '萧盟',
    age: 128
})

</script>

<style scoped>

</style>